import React from 'react'
import axios from './../../axios'
import Utils from './../../utils/utils'
import { Card, Button, Table, Modal, Form, Radio, Input, Select, DatePicker  } from 'antd';
import BaseForm from './../../components/BaseForm'
import Etable from './../../components/ETable'
import moment from 'moment'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea  = Input.TextArea;
class User extends React.Component {

    state = {
        list: [],
        isVisible: false
    }
    params = {
        page: 1
    }
    formList = [
        {
            type: 'INPUT',
            field: 'user',
            placeholder: '请输入用户名',
            width: 80,
        }, {
            type: 'INPUT',
            field: 'password',
            placeholder: '请输入密码',
            width: 80,
        },
    ]

    componentDidMount() {
        this.requestList()
    }
    //1.父组件定义的方法给子组件调用
    handleSubmit = (params) => {
        this.params = params
        this.requestList();
    }

    requestList = () => {
        axios.requestList(this, '/table/list1', this.params)
    }

    //2. 创建模态弹框
    handleOperate =(type) => {
        let item = this.state.selectedItem;
        if(type == 'create') {
            this.setState({
                type,
                isVisible: true,
                title: '创建员工'
            })
        } else if(type == 'edit'){
            if(!item) {
                Modal.info({
                    title: '温馨提示',
                    content: '请选择一个用户'
                })
                return;
            }
            this.setState({
                type,
                isVisible: true,
                title: '编辑员工',
                //获取选中表单的值
                userInfo: item
            })
        } else if(type == 'detail') {
            if(!item) {
                Modal.info({
                    title: '温馨提示',
                    content: '请选择一个用户'
                })
                return;
            }
            this.setState({
                type,
                isVisible: true,
                title: '员工详情',
                //获取选中表单的值
                userInfo: item
            })
        } else {
            if(!item) {
                Modal.info({
                    title: '温馨提示',
                    content: '请选择一个用户'
                })
                return;
            }
            let _this=this
            Modal.confirm({
                title: '确认删除',
                onOk() {
                    axios.ajax({
                        url: '/user/delete',
                        data: {
                            params: {
                                id: item.id
                            }
                        }
                    }).then((res)=>{
                        if(res.code == 0) {
                            _this.setState({
                                isVisible: false
                            })
                            _this.requestList()
                        }
                    })
                }
            })
        }
    }
    //3. 创建员工模态框提交按钮
    handleOk = () => {
        let type = this.state.type;
        // 获取表单值
        // 这里的userForm 是用过 wrappedComponentRef 得到的值
        let data = this.userForm.props.form.getFieldsValue();
        axios.ajax({
            url: 'user/add',
            data: {
                params: data
            }
        }).then((res)=>{
            if(res.code == 0) {
                this.setState({
                    isVisible: false
                })
                this.userForm.props.form.resetFields()
                this.requestList();
            }
        })

    }
    render() {

        // 4.取消员工详情模态框的footer
        const columns = [
            {
                title: 'id',
                dataIndex: 'id'
            },{
                title: '用户名',
                dataIndex: 'username'
            },{
                title: '性别',
                dataIndex: 'sex',
                render(sex){
                    return sex ==1 ?'男':'女'
                }
            },{
                title: '状态',
                dataIndex: 'statu',
                render(statu){
                    let config = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子一枚',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[statu]
                }
            },{
                title: '爱好',
                dataIndex: 'hobby',
                render(hobby){
                    let config = {
                        '1':'游泳',
                        '2':'打篮球',
                        '3':'踢足球',
                        '4':'跑步',
                        '5':'爬山',
                        '6':'骑行',
                        '7':'桌球',
                        '8':'麦霸'
                    }
                    return config[hobby];
                }
            },{
                title: '婚姻状况',
                dataIndex: 'isMarried'
            },{
                title: '生日',
                dataIndex: 'birthday'
            },{
                title: '联系地址',
                dataIndex: 'address'
            },{
                title: '早起时间',
                dataIndex: 'time'
            }
        ]
        let footer = {}
        if(this.state.type == 'detail') {
            footer = {
                footer: null
            }
        }
        return (
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleSubmit} />
                </Card>
                <Card style={{ marginTop: 10 }} className="wrap-button">
                    <Button type="primary" icon="plus" onClick={() => this.handleOperate('create')}>创建员工</Button>
                    <Button type="primary" icon="edit" onClick={() => this.handleOperate('edit')}>编辑员工</Button>
                    <Button type="primary" onClick={() => this.handleOperate('detail')}>员工详情</Button>
                    <Button type="primary" icon="delete" onClick={() => this.handleOperate('delete')} >删除员工</Button>
                </Card>
                <div className="content-wrap">
                    <Etable
                        bordered
                        updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={false}
                        selectedRowKeys={this.state.selectedRowKeys}
                    />
                </div>
                <Modal
                title={this.state.title}
                visible={this.state.isVisible}
                onOk={this.handleOk}
                onCancel={()=> {
                    this.userForm.props.form.resetFields()
                    this.setState({
                        isVisible:false
                    })
                }}
                width={600}
                {...footer}
                >
                    <UserForm type={this.state.type} userInfo={this.state.userInfo} wrappedComponentRef={(inst)=>{this.userForm = inst;}}/>
                </Modal>
            </div>
        )
    }
}

class UserForm extends React.Component{
    getState = (state)=>{
        return {
            '1':'咸鱼一条',
            '2':'风华浪子',
            '3':'北大才子一枚',
            '4':'百度FE',
            '5':'创业者'
        }[state]
    }
    render() {
        let type = this.props.type;
        let userInfo = this.props.userInfo || {};
        const { getFieldDecorator } = this.props.form;
       
        //设置布局模式
        const FormLayout = {
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        }
        
        return(
            <Form layout="horizontal">
                 <FormItem label="姓名" {...FormLayout}>
                    {
                        userInfo && type=='detail'?userInfo.username:
                        getFieldDecorator('username',{
                            initialValue: userInfo.username
                        })(
                            <Input type="text" placeholder="请输入姓名"/>
                        )
                    }
                </FormItem>
                <FormItem label="性别" {...FormLayout}>
                    {
                        userInfo && type=='detail' ? userInfo.sex=1 ? '男':'女' :
                        getFieldDecorator('sex',{
                            initialValue: userInfo.sex
                        })(
                            <RadioGroup>
                                <Radio value={1}>男</Radio>
                                <Radio value={2}>女</Radio>
                            </RadioGroup>
                        )
                    }
                </FormItem>
                <FormItem label="状态" {...FormLayout}>
                    {
                        userInfo && type=='detail' ? this.getState(userInfo.statu):
                        getFieldDecorator('statu',{
                            initialValue: userInfo.statu
                        })(
                            <Select>
                                <Option value={1}>咸鱼一条</Option>
                                <Option value={2}>咸鱼一条</Option>
                                <Option value={3}>咸鱼一条</Option>
                                <Option value={4}>咸鱼一条</Option>
                                <Option value={5}>咸鱼一条</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="生日" {...FormLayout}>
                    {
                        userInfo && type=='detail' ? userInfo.birthday :
                        getFieldDecorator('birthday',{
                            initialValue: moment(userInfo.birthday)
                        })(
                            <DatePicker />
                        )
                    }
                </FormItem>
                <FormItem label="联系地址" {...FormLayout}>
                    {
                        userInfo && type=='detail' ? userInfo.birthday :
                        getFieldDecorator('address',{
                            initialValue: userInfo.address
                        })(
                            <TextArea rows={3} placeholder="请输入联系地址"/>
                        )
                    }
                </FormItem>
            </Form>
        )
    }
}
UserForm = Form.create({})(UserForm)

export default User